<script setup>
import axios from '../utils/axios'
import { reactive, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { it } from 'element-plus/es/locales.mjs';
import { SortUp } from '@element-plus/icons-vue';
const data = reactive({
    page: 1, //当前页码
    limit: 5, //每页数量
    total: 0, //总记录数
    tableData: [], //分页的表格数据
    showAddDialog:false,//控制显示与隐藏
    showEditDialog:false,
})

const tableRef = ref();

//用ref要.value,这样可以保证格式
//增加表单的数据
const addForm = ref({
    ename:'',
    sal:3600
})

const editForm = ref({
    empno:'',
    ename:'',
    sal:3600
})

const init = () => {
    axios.get("/emp/page", {
        params: {
            page: data.page,
            limit: data.limit
        }
    })//正确响应后的回调函数，响应内容封装到res变量中
        .then(res => {
            console.log(res);
            //把数据赋值给tableData
            data.tableData = res.records;
            data.total = res.total;
        })
}

//分页跳转函数，pg是跳转的页码
const changePage = (pg) => {
    data.page = pg;
    init();
}

const del=(empno)=>{
    axios.get("/emp/del?empno="+empno).then(res=>{
        if(res==0){
            ElMessage({
                showClose:true,//是否显示关闭按钮
                message:"删除成功!",//消息窗口中的样式类型
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
                onClose:()=>{
                    location.reload();//刷新本页面
                }
            })
        }
    })
}

const doAdd=()=>{
    axios.post("/emp/doAdd",addForm.value).then(res=>{
        if(res==0){
            ElMessage({
                showClose:true,//是否显示关闭按钮
                message:"增加成功!",//消息窗口中的样式类型
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
                onClose:()=>{
                    data.showAddDialog=false;//关闭对话框
                    addForm.value={
                        ename:'',
                        sal:3600
                    }
                    init();//刷新本页面
                }
            })
        }
    })
}

const edit=(emp)=>{
    data.showEditDialog=true;
    editForm.value.empno=emp.empno;
    editForm.value.ename=emp.ename;
    editForm.value.sal=emp.sal;
}

const doEdit=()=>{
    axios.post("/emp/doEdit",editForm.value).then(res=>{
        if(res==0){
            ElMessage({
                showClose:true,//是否显示关闭按钮
                message:"修改成功!",//消息窗口中的样式类型
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
                onClose:()=>{
                    data.showEditDialog=false;//关闭对话框
                    editForm.value={
                        empno:'',
                        ename:'',
                        sal:3600
                    }
                    init();//刷新本页面
                }
            })
        }
    })
}

const getChecked = () => {
    const selectAry = tableRef.value.getSelectionRows();
    // 筛选成 [ 7369, 7499 ]
    let ids = selectAry.map( item => item.empno);
    console.log(ids); //[ 7369, 7499 ]
    axios.post("/emp/delMult", ids).then(res=>{
        if(res==0){
            init();
        }
    })
}

//钩子函数，页面加载完后自动调用
onMounted(() => {
    init()
})
</script>

<template>

    <p>
        <el-button @click="data.showAddDialog = true" type="primary">增加</el-button>
        <el-button @click="getChecked" type="primary">批量删除</el-button>
    </p>

    <el-table ref="tableRef" :data="data.tableData" border style="width: 100%;" display:flex>
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column width="100" label="员工编号" prop="empno"></el-table-column>
        <el-table-column width="100" label="员工姓名" prop="ename"></el-table-column>
        <el-table-column width="100" label="员工工资" prop="sal"></el-table-column>

        <el-table-column width="150" label="操作">
            <template #default="scope">
                <el-button @click="del(scope.row.empno)" type="danger" size="small" circle icon="delete"></el-button>
                <el-button @click="edit(scope.row)" type="primary" size="small" circle icon="edit"></el-button>
            </template>
        </el-table-column>
    </el-table>

<!-- 
    background:按钮背景颜色
    layout:布局,
    :total:指定总记录数的变量
    :page-size:指定每页显示的记录数
    @current-change:当前页码改变后的回调函数
    @current-page:当前页码
-->
    <el-pagination background layout="total,prev,pager,next,jumper" :total="data.total" :page-size="data.limit" @current-page="data.page" @current-change="changePage"></el-pagination>

    <el-dialog title="新增员工" v-model="data.showAddDialog" style="width:300px;height:350px">
        <el-form style="width: 100%;" label-width="80">
            <el-form-item label="员工姓名">
                <el-input placeholder="请输入员工姓名" v-model="addForm.ename"></el-input>
            </el-form-item>
            <el-form-item label="员工工资">
                <el-input-number placeholder="请输入员工工资" v-model="addForm.sal"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button @click="doAdd">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="修改员工" v-model="data.showEditDialog" style="width:300px;height:350px">
        <el-form style="width: 100%;" label-width="80">
            <el-form-item label="员工编号">
                <el-input placeholder="请输入员工编号" v-model="editForm.empno"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
                <el-input placeholder="请输入员工姓名" v-model="editForm.ename"></el-input>
            </el-form-item>
            <el-form-item label="员工工资">
                <el-input-number placeholder="请输入员工工资" v-model="editForm.sal"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button @click="doEdit">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<style scoped></style>
